<template>>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>选择体检套餐</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul class="setmeal">
            <li v-for="(mealitem, index) in meals" :key="index">
                <div class="item">
                    <div class="item-left" @click="chooseMeal(mealitem.smid,mealitem.name)">
                        <h3>套餐</h3>
                        <p>{{ mealitem.name }}</p>
                    </div>
                    <div class="item-right" @click="toggleItem(index)">
                        <p>详情</p>
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>
                 <div class="item-content" v-if="expandedIndex === index">
                    <table>
                        <tr>
                            <th>检查项目</th>
                            <th>检查内容</th>
                            <th>检查意义</th>
                        </tr>
                        <tr v-for="(item, index) in checkItems" :key="index" >
                            <td>{{ item.ciName }}</td>
                            <td>{{ item.ciContent }}</td>
                            <td>{{ item.meaning }}</td>
                        </tr>
                    </table>
                </div>
            </li>
        </ul>
        
        <div class="bottom-ban"></div>
        <footer>
            <ul>
                <li @click="()=>{router.push('/hospital')}">
                    <i class="fa fa-home"></i>
                    <p>云医院</p>
                </li>
                <li @click="()=>{router.push('/setmeal')}">
                    <i class="fa fa-opencart"></i>
                    <p>商城</p>
                </li>
                <li @click="()=>{router.push('/index')}">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li @click="()=>{router.push('/personal')}">
                    <i class="fa fa-user"></i>
                    <p>我</p>
                </li>
            </ul>
        </footer>
    </div>
    
</template>

<script setup>
import router from '@/router';
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
// 抽象出一个公共的请求函数来处理API调用的共通逻辑
const fetchApiData = async (url) => {
  try {
    const response = await axios.get(url);
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      console.error(`API returned code: ${response.data.code}`);
      return [];
    }
  } catch (error) {
    console.error('Error fetching data:', error);
    return [];
  }
};
const sex = JSON.parse(sessionStorage.getItem('userInfo')).sex;
const meals = ref([]);
// const sex = user;
const fetchmeals = async () => {
  const url = `http://localhost:9000/setmeal/list?type=${sex}`;
  meals.value = await fetchApiData(url);
};
const fetchmealPrice = async (smid) => {
  const url = `http://localhost:9000/setmeal/getPrice?smId=${smid}`
  const price = await fetchApiData(url);
  return price;
};
async function chooseMeal (smid,name) {
    let data = JSON.parse(sessionStorage.getItem('orderdetail'));
    data.smid = smid;
    data.smname = name;
    data.price = await fetchmealPrice(smid);
    sessionStorage.setItem('orderdetail',JSON.stringify(data));
    router.push('/selectdate')
};

const checkItems = ref([]);
const fetchcheckItems = async (smid) => {
  const url = `http://localhost:9000/checkitem/getCheckitemBySmid?smid=${smid}`;
  checkItems.value = await fetchApiData(url);
};
const expandedIndex = ref(null);

const toggleItem = async (index) => {
  if (expandedIndex.value === index) {
    expandedIndex.value = null;
  } else {
    expandedIndex.value = index;
    await fetchcheckItems(meals.value[index].smid);
  }
};


onMounted(async () => {
  await fetchmeals();
  // await fetchmealPrice();
});
</script>

<style src="../assets/css/setmeal.css" scoped>
</style>